<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易考拉QRcode</title>
  </head>
  <link rel="stylesheet" href="../css/reset.css">
  <style>
    .QR {
      position: relative;
      margin-left: 300px;
      font-size: 13px;
      text-align: center;
      /* background-color: pink; */
    }

    .QR>.QRIMG {
      position: absolute;
      top: 30px;
      /* 
      向左移动50%；
       */
      left: 0;
      transform: translate(-50%);
      margin-left: 50%;
      border: 1px solid #ccc;
      padding: 5px 5px 0;
      display: none;
    }

    .QR>.QRIMG>span {
      display: inline-block;
      margin-top: 5px;
    }

    .QR>span:first-child:hover {
      color: red;
    }

    .QR:hover .QRIMG {
      /* display: block; */
      /* 
      display:inline就可以了，因为.QRIMG绝对定位了
       */
      display: inline;
    }

    .arrow {
      position: absolute;
      top: -6px;
      left: 0;
      right: 0;
      margin: 0 auto;
      width: 10px;
      height: 10px;
      background-color: #fff;
      border-top: 1px solid #eaeaea;
      border-left: 1px solid #eaeaea;
      transform: rotate(45deg);
      margin-top: 0 !important;
    }
  </style>

  <body>
    <a class="QR" href="">
      <span>手机考拉</span>
      <span class="QRIMG">
        <span class="arrow"></span>
        <img src="./img/qrcode.png" alt="">
        <span>下载APP</span>
        <span>领1000元新人红包</span>
      </span>
    </a>
  </body>

</html>